import React, { useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile'
import { Image, List, ImageViewer, Button, Dialog, Toast, Popup, Form, Input } from 'antd-mobile'
import LazyLoad from 'react-lazyload';
import { useNavigate } from 'react-router-dom'
import { getImage, deleteImage, addImage } from '../../../api'
import '../ImageList/index.css'

export default function ImageList() {
  const [ imageArr, setImageArr ] = useState([])
  const [ from, setFrom ] = useState({url:'',location:''})
  const [visible, setVisible] = useState(false)
  const [visible1, setVisible1] = useState(false)
  const [image, setImage] = useState('')

  const navigate = useNavigate()
  const back = ()=>{
    navigate(-1)
  }

  useEffect(()=>{
    const getImg = async ()=>{
      const img = await getImage()
      setImageArr([...img])
    }

    getImg()
  },[])

  const add = ()=>{
    setVisible1(true)
  }

  const listItemHtml = imageArr.map((imageObj,index)=>{
    return <List.Item
              key={imageObj.id}
              prefix={
                <LazyLoad>
                  <Image
                    className='list-item-image'
                    width={60}
                    height={60} 
                    onClick={() => {
                      setVisible(true)
                      setImage(imageObj.url)
                    }}
                    src={imageObj.url} />
                </LazyLoad>
              }
              description={imageObj.date}
            >
              <div className='flex-full'>
                <span>{imageObj.location}</span> 
                <Button size='mini' color='primary' fill='none' onClick={async () => {
                  const result = await Dialog.confirm({
                    content: '你确定要删除吗？',
                  })
                  if (result) {
                    const transferArr = imageArr
                    try {
                      await deleteImage({id:imageObj.id})
                      transferArr.splice(index,1)
                      setImageArr([...transferArr])
                      Toast.show({ content: '删除成功', position: 'bottom' })
                    } catch (error) {
                      if(error.code === 451){
                        setTimeout(() => {
                          navigate('/login')
                        }, 2000);
                      }
                    }
                    
                  }
                }}>
                  删除
                </Button>
              </div>
              
            </List.Item>
  })

  return (
    <div id='image-list'>
      <NavBar className='navbar' onBack={back} right={<Button onClick={add} color='primary' size='small' fill='solid'>新增</Button>}>编辑图片</NavBar>
      <List>
        {listItemHtml}
      </List>
      <ImageViewer
        image={image}
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      />
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '40vh' }}
      >
        <div className='flex-full'>
          <Button color='primary' fill='none' 
            onClick={() => {
            setVisible1(false)
          }}>
            取消
          </Button>
          <span style={{fontSize:'18px'}}>图片信息</span>
          <Button color='primary' fill='none'
            onClick={async() => {
              //发送请求，若成功执行关闭
              try {
                await addImage({...from})
                setVisible1(false)
                const img = await getImage()
                setImageArr([...img])
              } catch (error) {
                if(error.code === 451){
                  setTimeout(() => {
                    navigate('/login')
                  }, 2000);
                }
              }
              
          }}>
            提交
          </Button>
        </div>
        <Form layout='horizontal' mode='card'>
          <Form.Item className='form-item' label='地点'>
            <Input placeholder='请输入' value={from.location} onChange={val=>{
              setFrom({...from,location:val})
            }} />
          </Form.Item>
          <Form.Item className='form-item' label='图片网址'>
            <Input placeholder='请输入' value={from.url} onChange={val=>{
              setFrom({...from,url:val})
            }}/>
          </Form.Item>
        </Form>
      </Popup>
    </div>
  )
}
